<template>
  <div class="add">
    <BaseDialog
      width="1200px"
      :title="$t('员工选择')"
      v-model:visible="innerVisible"
      :renderDefaultFooter="multiple"
      :onOk="handleOk"
    >
      <div>
        <QueryForm
          ref="conditionForm"
          module="employeeSelection"
          :searchBtnLoading="loading"
          v-model:searchForm="searchForm"
          v-model:search-column="searchColumn"
          @handle-search="onSearch"
        />
      </div>
      <div style="padding: 10px">
        <MyTable
          tableId="employeeSelection"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading"
          :pageVo="pageVo"
          ref="commonTable"
          tableType="dialogTable"
          moduleName="employeeSelection"
          @handleSelectionChange="handleSelectionChange"
          @handle-page-change="handlePageChange"
          @handleCellClick="handleCellClick"
        ></MyTable>
      </div>
    </BaseDialog>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import * as api from "@/api/index.js";
import i18n from "@/lang/index.js";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  currRowServer: {
    type: Array,
    default: () => [],
  },
  currRowKey: {
    type: String,
    default: "id",
  },
  rowKey: {
    type: String,
    default: "id",
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  columns: {
    type: Array,
    default: () => [],
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const loading = ref(false);
const dataSource = ref([]);
const columns = ref([
  {
    title: i18n.global.t("序号"),
    type: "seq",
    width: 60,
    fixed: "left",
  },
  {
    field: "userName",
    title: i18n.global.t("登录名"),
  },
  {
    field: "empCode",
    title: i18n.global.t("员工编号"),
  },
  {
    field: "empName",
    title: i18n.global.t("员工姓名"),
  },
  {
    field: "phone",
    title: i18n.global.t("联系电话"),
  },
  {
    field: "email",
    title: i18n.global.t("邮箱"),
  },
  {
    field: "siteName",
    title: i18n.global.t("所属组织"),
  },
  {
    field: "companyName",
    title: i18n.global.t("所属公司"),
  },
  {
    field: "postName",
    title: i18n.global.t("角色"),
    width: "150px",
    formatter: ({ row }) => {
      return row.empRoleList?.map((item) => item.roleName).join(",") || "";
    },
  },
  ...props.columns,
]);
const searchForm = ref({});
const searchColumn = ref([
  {
    label: i18n.global.t("员工编号"),
    type: "label_input",
    placeholder: i18n.global.t("请输入"),
    prop: "empCode",
  },
  {
    label: i18n.global.t("员工姓名"),
    type: "label_input",
    placeholder: i18n.global.t("请输入"),
    prop: "empName",
  },
]);
const multipleSelection = ref([]);
const pageVo = reactive({
  pageSize: 50,
  total: 10,
  currentPage: 1,
  status: true,
});
const commonTable = ref();
onMounted(() => {
  if (props.multiple) {
    columns.value.unshift({
      type: "checkbox",
      width: 50,
      fixed: "left",
      align: "center",
    });
  }
  list();
});
const list = () => {
  loading.value = true;
  api.default.system.employees
    .list({
      ...searchForm.value,
      pageNum: pageVo.currentPage,
      pageSize: pageVo.pageSize,
    })
    .then((res) => {
      dataSource.value = res.rows;
      loading.value = false;
      pageVo.total = res.total;
      // 设置默认选中
      if (props.currRowServer && props.currRowServer.length > 0) {
        // 等待DOM更新后执行默认选中
        setTimeout(() => {
          if (commonTable.value) {
            // 查找匹配的员工并设置选中状态
            const selectedIds = props.currRowServer.map(
              (emp) => emp[props.currRowKey]
            );
            const rows = dataSource.value.filter((row) => {
              const bool = selectedIds.includes(row[props.rowKey]);
              if (bool && props.columns.length) {
                const obj = props.currRowServer.find(
                  (item) => item[props.currRowKey] === row[props.rowKey]
                );
                props.columns.forEach((item) => { 
                    row[item.field] = obj[item.field];
                });
              }
              return bool;
            });
            commonTable.value.setCheckboxRow(rows, true);
          }
        }, 0);
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
const handlePageChange = (val) => {
  const { currentPage, pageSize } = val;
  pageVo.currentPage = currentPage;
  pageVo.pageSize = pageSize;
  list();
};
const onSearch = () => {
  pageVo.currentPage = 1;
  list();
};
const handleSelectionChange = (list) => {
  multipleSelection.value = list;
};
const handleCellClick = (val) => {
  if (props.multiple) return;
  handleOk(val);
};
const handleOk = (data) => {
  if (props.multiple) {
    emits("onSubmit", multipleSelection.value);
  } else {
    emits("onSubmit", data);
  }
  innerVisible.value = false;
};
</script>
<style lang="scss" scoped>
</style>
